<template>
  <el-collapse v-model="activeNames" style="padding: 0 10px">
    <el-collapse-item name="1">
      <template slot="title">
        基本配置<i class="header-icon el-icon-info" />
      </template>
      <el-form :model="formData" label-width="100px" :size="formSize">
        <el-form-item label="流程key：" prop="id">
          <el-input v-model="formData.id" />
        </el-form-item>
        <el-form-item label="流程名称：" prop="name">
          <el-input v-model="formData.name" />
        </el-form-item>
        <el-form-item label="流程描述：" prop="documentation">
          <el-input v-model="formData.documentation" />
        </el-form-item>
      </el-form>
    </el-collapse-item>
    <el-collapse-item name="2">
      <template slot="title">
        表单配置<i class="el-icon-s-order" />
      </template>
      <el-form label-width="100px" :size="formSize">
        <el-form-item label="表单：" prop="formKey">
          <el-select v-model="formId" style="width: 100%;">
            <el-option
              v-for="(property, index) in formProperty"
              :key="index"
              :value="property.id"
              :label="property.name"
            />
          </el-select>
        </el-form-item>
      </el-form>
    </el-collapse-item>
  </el-collapse>
</template>

<script>
import mixinPanel from '../../utils/mixinPanel'
import { mapActions, mapState } from 'vuex'

export default {
  name: 'Process',
  mixins: [mixinPanel],
  data() {
    return {
      formId: null
    }
  },
  computed: {
    ...mapState('bpmn', ['formKey'])
  },
  watch: {
    'formId': function(val) {
      this.changeFormKey(val)
      this.updateProperties({ formKey: val || null })
    }
  },
  mounted() {
    this.formId = this.formKey
  },
  methods: {
    ...mapActions('bpmn', ['changeFormKey'])
  }
}
</script>
